<template>
    <div id="hot" :style="{backgroundColor: swipeColor[index]}">
      <v-touch v-on:swipeleft="swiperleft"  v-on:swiperight="swiperright" class="wrapper"  style="touch-action: pan-y!important;">
      <img class="hot-img" src="../../../assets/imgs/homePage/放大镜.png" alt="" @click="search">
      <mt-swipe @change="handleChange" :stop-propagation="true" :prevent="true" id="swipe2" v-if="returnComic" :show-indicators="false" :auto="4000">
        <mt-swipe-item class="swipe-item" v-for="(item,index) in comic" :key="index">
          <img v-if="item.imgUrl" :src="item.imgUrl" alt="">
        </mt-swipe-item>
      </mt-swipe>

        <!--漫画展示-->
        <!-- <div>
           <div class="comic-bar" v-if="returnComicContent">
             <div v-for="(item,index) in comicContent" :key="index">
               标题
            <div class="comic-tit" >
              <p>{{item.comicTit}}</p>
              <div>查看全部 <img class="arr" src="../../../assets/imgs/homePage/箭头.png" alt=""></div>
            </div>
            展示
            <div  class="comic-content" >
              <div v-for="items in item.show"  @click="detail(items)">
                <img :src="items.imgUrl" alt="">
                <h3>{{items.name}}</h3>
                <p>{{items.introduce}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
        -->
        <div class="comic">
          <div class="comic-tit" >
            <p>{{comicTit[0]}}</p>
            <div>查看全部 <img class="arr" src="../../../assets/imgs/homePage/箭头.png" alt=""></div>
          </div>
          <div class="comic-bar" v-if="$store.state.states">
            <div v-for="(item,index) in recommendComic" :key="index" @click="detail(item)">
              <img :src="item.imgUrl" alt="">
              <h3>{{item.name}}</h3>
              <p>更新至{{item.beUpdateTo}}话</p>
            </div>
          </div>
          <div class="cut" @click="recommendC(6)">
            <img src="../../../assets/imgs/detail/刷新.png" alt="">
            换一批
          </div>
        </div>

        <div class="comic">
          <div class="comic-tit" >
            <p>{{comicTit[1]}}</p>
            <div>查看全部 <img class="arr" src="../../../assets/imgs/homePage/箭头.png" alt=""></div>
          </div>
          <div class="comic-bar" v-if="$store.state.states">
            <div v-for="(item,index) in recommendComic2" :key="index" @click="detail(item)">
              <img :src="item.imgUrl" alt="">
              <h3>{{item.name}}</h3>
              <p>更新至{{item.beUpdateTo}}话</p>
            </div>
          </div>
          <div class="cut" @click="recommendC2(6)">
            <img src="../../../assets/imgs/detail/刷新.png" alt="">
            换一批
          </div>
        </div>

        <div class="comic">
          <div class="comic-tit" >
            <p>{{comicTit[2]}}</p>
            <div>查看全部 <img class="arr" src="../../../assets/imgs/homePage/箭头.png" alt=""></div>
          </div>
          <div class="comic-bar" v-if="$store.state.states">
            <div v-for="(item,index) in recommendComic3" :key="index" @click="detail(item)">
              <img :src="item.imgUrl" alt="">
              <h3>{{item.name}}</h3>
              <p>更新至{{item.beUpdateTo}}话</p>
            </div>
          </div>
          <div class="cut" @click="recommendC3(6)">
            <img src="../../../assets/imgs/detail/刷新.png" alt="">
            换一批
          </div>
        </div>

      </v-touch>
    </div>
</template>

<script>
  import  axios from 'axios'
    export default {
        name: "Hot",
      data(){
          return{
            comic:[],
            swipeColor:['#213771','#a28078','pink'],
            index:0,
            comicTit:['今日热门速递','前方在线炒股','少女心炸裂现场'],
            recommendComic:[],
            recommendComic2:[],
            recommendComic3:[]
          }
      },
      // data(){
      //   return{
      //     comic:[],
      //     comicContent:[
      //       {
      //         content:[],
      //         comicTit:'今日热门速递',
      //         show:[]
      //       },
      //      {
      //        content:[],
      //        comicTit:'前方在线炒股',
      //        show:[],
      //       },
      //       {
      //         content:[],
      //         comicTit:'少女心炸裂现场',
      //         show:[],
      //        }
      //      ],       //储存得到的数据
      //     popularity:10000,          //筛选条件
      //     monthlyPass:1000,            //筛选条件
      //     series:['恋爱','纯爱','校园','后宫'],   //筛选条件
      //     comicActive:false,
      //     swipeColor:['#a51f40','#a28078','pink'],
      //     index:0
      //   }
      // },
      created(){
        axios.get('../../static/json/home.json')
          .then(res =>{
            // console.log(res);
            this.comic = res.data.comic
          }).catch(err =>{
          console.log(err);
        })
        this.recommendC(6)
        this.recommendC2(6)
        this.recommendC3(6)
      },
      computed:{
        returnComic(){
          return this.comic.length!=0? true:false
        },
        // returnComicContent(){
        //   //获取到数据之后才进行处理
        //   if(this.$store.state.states){
        //     if(this.comicActive){//避免二次渲染
        //       return true
        //     }
        //     this.comicActive = true
        //     //筛选数据
        //     for (var i = 0; i < this.$store.state.comic.length; i++) {
        //       //拿到人气大于等于popularity的漫画
        //       if(this.$store.state.comic[i].popularity>=this.popularity){
        //         this.comicContent[0].content.push(this.$store.state.comic[i])
        //       }
        //       //拿到月票大于等于monthlyPass的漫画
        //       if(this.$store.state.comic[i].monthlyPass>=this.monthlyPass){
        //         this.comicContent[1].content.push(this.$store.state.comic[i])
        //       }
        //       //拿到系列有series的漫画
        //       for (var j = 0; j < this.$store.state.comic[i].series.length; j++) {
        //         if(this.$store.state.comic[i].series[j].indexOf(this.series[0])!=-1||this.$store.state.comic[i].series[j].indexOf(this.series[1])!=-1||this.$store.state.comic[i].series[j].indexOf(this.series[2])!=-1||this.$store.state.comic[i].series[j].indexOf(this.series[3])!=-1){
        //           this.comicContent[2].content.push(this.$store.state.comic[i])
        //           // console.log('1',i);
        //           break   //有其中一个系列则直接进行下一个漫画的筛选
        //         }else{
        //           // console.log('2',i);
        //         }
        //       }
        //     }
        //     //展示处理
        //     this.getComic(this.comicContent[0].content,this.comicContent[0].show)
        //     // console.log(this.comicContent[0].show);
        //     this.getComic(this.comicContent[1].content,this.comicContent[1].show)
        //     // console.log(this.comicContent[1].show);
        //     this.getComic(this.comicContent[2].content,this.comicContent[2].show)
        //     // console.log(this.comicContent[2].show);
        //     return true
        //   }else{
        //     // console.log('1');
        //     return false
        //   }
        // },
      },
      methods:{
        recommendC(sum){
          this.recommendComic = [];
          for (var i = 0; i < sum; i++) {
            var num = Math.round(Math.random()*(this.$store.state.comic.length-1))
            this.recommendComic.push(this.$store.state.comic[num])
          }
        },
        recommendC2(sum){
          this.recommendComic2 = [];
          for (var i = 0; i < sum; i++) {
            var num = Math.round(Math.random()*(this.$store.state.comic.length-1))
            this.recommendComic2.push(this.$store.state.comic[num])
          }
        },
        recommendC3(sum){
          this.recommendComic3 = [];
          for (var i = 0; i < sum; i++) {
            var num = Math.round(Math.random()*(this.$store.state.comic.length-1))
            this.recommendComic3.push(this.$store.state.comic[num])
          }
        },
        search(){
          // console.log('1');
          this.$router.push({'path': '/search'})
        },
        // 跳转路由并传递参数
        detail(obj){
          // console.log(obj);
          this.$router.push({name:'Detail',query:obj})
        },
        // getComic(data,arr){     //漫画展示处理  暂定
        //   for (var i = 0; i < 6; i++) {
        //     arr.push(data[i])
        //   }
        //   // console.log(arr);
        // },
        swiperleft: function () {
          this.$router.push({'path': '/homePage/ranking'});
        },
        swiperright: function () {
          this.$router.push({'path': '/homePage/recommend'});
        },
        handleChange(index) {
          this.index = index
          // console.log(index);
        }
      }
    }
</script>

<style lang="less">
@import "../../../assets/css/homePage/hot";

</style>
